<template>
  <div class="time_line">
    <!-- <van-steps direction="vertical" active-color="#0570db" :active="0">
      <van-step
        v-for="(item, index) of progressList"
        :key="item.id"
        @click.capture.native="thisImgList = item.imgList"
    >-->
    <div
      class="time_item"
      v-for="(item, index) of progressList"
      :key="item.id"
      @click.capture="thisImgList = item.imgList"
    >
      <div class="time_time">
        <span>{{item.opDate | filterDay}}</span>
        <span>{{item.opDate | filterTime}}</span>
      </div>
      <div class="time_line_block">
        <span class="dot" :class="!index ? 'active': ''"></span>
        <span class="line"></span>
      </div>
      <div class="time_content" :class="!index ? 'active': ''">
        <h5>[{{item.opTitle}}] {{item.opRemark}}</h5>
        <div class="img_block" v-if="item.fileList">
          <div class="img_wraper" v-for="(img, key) of item.fileList" :key="img.fileId">
            <van-image :src="img.url" fit="cover" radius="5" @click.capture="clickShowImg(index, key)" />
          </div>
        </div> 
      </div>
    </div>

    <!-- </van-step>
    </van-steps>-->
    <!-- 图片预览 -->
    <van-image-preview
      v-model="showImgPreview"
      :images="thisImgList"
      :startPosition="startPosition"
    >
      <!-- <template v-slot:index>第{{ index }}页</template> -->
    </van-image-preview>
  </div>
</template>

<script>
export default {
  name: "TimeLine",
  props: {
    progressList: {
      type: Array
    }
  },
  filters: {
    filterDay(date) {
      return date
        .split(" ")[0]
        .split("-")
        .slice(1)
        .join("/");
    },
    filterTime(date) {
      return date
        .split(" ")[1]
        .split(":")
        .slice(0, 2)
        .join(":");
    }
  },
  data() {
    return {
      showImgPreview: false,
      activeIndex: 0,
      startPosition: 0,
      thisImgList: []
    };
  },
  methods: {
    clickShowImg(index, key) {
      console.log("clickShowImg -> index", index, key);
      this.startPosition = key;
      this.showImgPreview = true;
      this.thisImgList = this.progressList[index].fileList.map(item => {
        return item.url;
      });
    }
  }
};
</script>

<style lang="less" scoped>
.time_line {
  background: #fff;
  margin-bottom: 10px;
   & .time_item:last-of-type {
    .time_line_block .line {
      display: none;
    }
  }
}
.img_block {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
  overflow: hidden;
  .img_wraper {
    width: 60px;
    height: 60px;
    margin-right: 5px;
  }
}
// 列表项
.time_item {
  display: flex;
  // flex-flow: row nowrap;
  justify-content: flex-end;
  color: @default-dark-2;
  .time_time {
    display: flex;
    flex-flow: column wrap;
    font-size: 13px;
    padding: 2px 15px;
    padding-right: 0;
    color: @default-color;
    > span:nth-child(2) {
      color: @default-dark;
    }
  }
  .time_line_block {
    // width: 20%;\
    width: 40px;
    display: flex;
    flex-flow: column wrap;
    justify-content: flex-start;
    align-items: center;
    .dot {
      display: inline-block;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background-color: @default-dark-2;
    }
    .dot.active {
      background-color: @primary-color;
    }
    .line {
      display: inline-block;
      width: 1px;
      height: calc(100% - 24px);
      margin: 3px 0;
      // margin: 3px 0;
      background-color: @default-dark-2;
    }
  }
 
   .time_content.active {
     color: @default-color;
   }
  .time_content {
    flex: 1;
    h5 {
      font-size: 15px;
      line-height: 20px;
      font-weight: normal;
      margin-bottom: 10px;
    }
    p {
      font-size: 14px;
      margin-top: 10px;
    }
  }
}
</style>